<template>
  <div>
    <el-card>
      <el-form ref="shopQueryList" :inline="true">
        <el-form-item label="优惠券名称">
          <el-input v-model="shopQueryList.shopName" />
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="shopQueryList.date"
            align="right"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
          <el-link type="primary">展开</el-link>
        </el-form-item>
        <div class="add-btn">
          <el-button type="primary" @click="goAdd">
            <i class="el-icon-plus" />
            新增
          </el-button>
        </div>
        <el-table :data="tableData">
          <el-table-column type="selection" />
          <el-table-column label="名称" prop="Aname" />
          <el-table-column label="优惠金额/元" prop="money" />
          <el-table-column label="使用限制" prop="impose" />
          <el-table-column label="使用期限" prop="deadline" />
          <el-table-column label="领取限制" prop="receive" />
          <el-table-column label="发放数量/张" prop="released" />
          <el-table-column label="领取金额/元" prop="leading" />
          <el-table-column label="剩余数量/张" prop="remaining" />
          <el-table-column label="确认退款率">
            <el-button type="primary" size="mini">编辑</el-button>
            <el-button type="danger" size="mini">删除</el-button>
          </el-table-column>
        </el-table>
      </el-form>
      <el-row type="flex" justify="center">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total"
          :current-page="pageData.page"
          :page-sizes="[100, 200 , 300, 400]"
          :page-size="pageData.size"
        />
      </el-row>
    </el-card>
    <el-dialog title="新增优惠券记录" :visible.sync="isDialogShow" width="30%">
      <el-form ref="discountRecord" label-width="100px" :model="discountRecordForm">
        <el-form-item label="优惠卷名称">
          <el-select v-model="discountRecordForm.name" style="width:100%" placeholder="请选择">
            <el-option label="普通优惠券" value="普通优惠券" />
            <el-option label="店面优惠券" value="店面优惠券" />
          </el-select>
        </el-form-item>
        <el-form-item label="优惠金额">
          <el-input v-model="discountRecordForm.price" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="使用限制">
          <el-select v-model="discountRecordForm.astrict" style="width:100%" placeholder="请选择">
            <el-option label="1" value="1" />
            <el-option label="2" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="使用时效">
          <el-input v-model="discountRecordForm.timeLimit" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="账号领取限制">
          <el-input v-model="discountRecordForm.getAstrict" placeholder="请选择" />
        </el-form-item></el-form>
      <template #footer>
        <el-row type="flex" justify="end">
          <el-button @click="onCancel">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-row>
      </template>
    </el-dialog>

  </div>
</template>
<script>
import { getDiscounList, addDiscounts } from '@/api/discount.js'
export default {
  name: 'GeneralDiscountCoupon',
  data() {
    return {
      shopQueryList: {},
      tableData: [{
        Aname: '', // 名称
        money: '', // 优惠金额/元
        impose: '', // 使用限制
        deadline: '', // 使用期限
        receive: 0, // 领取限制
        released: '', // 发放数量/张
        leading: '', // 领取金额/元
        remaining: ''// 剩余数量/张
      }],
      pageData: {
        total: 1,
        page: 1,
        size: 1
      },
      isDialogShow: false,
      discountRecordForm: {
        name: '',
        price: '', // 优惠金额/元
        astrict: '', // 使用期限
        timeLimit: '',
        getAstrict: ''

      }

    }
  },
  created() {
    this.getDiscounList()
  },
  methods: {
    // 新增优惠券
    async  addDiscounts() {
      await addDiscounts(this.discountRecordForm)
      this.discountRecordForm = {
        name: '',
        price: '', // 优惠金额/元
        astrict: '', // 使用期限
        timeLimit: '',
        getAstrict: ''
      }
      this.getDiscounList()
    },
    async getDiscounList() {
      const res = await getDiscounList()
      this.tableData = res.data.data
      console.log(this.tableData)
    },
    goAdd() {
      this.isDialogShow = true
    },
    onCancel() {
      this.isDialogShow = false
    },
    onSubmit() {
      this.addDiscounts()
      this.onCancel()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
